@import "compass";

html body {
	height: auto;
	padding-bottom: 24px;
}

/* ---------- Bottom Dock ---------- */

.chat-bar {
	background: #E5E5E5 url(../images/btm-dock_bg.png) repeat-x;
	border: 1px solid #B5B5B5;
	border-bottom-width: 0;
	bottom: 0;
	height: 24px;
	left: 15px;
	position: fixed;
	right: 15px;
	z-index: 1000;

	.status-message, .trigger-name {
		@include text-shadow(1px 1px #FFF);
	}
}

.chat-sound {
	position: absolute;
}

.chat-status {
	float: left;
}

/* ---------- Bottom Dock Tabs ---------- */
.chat-bar {
	div ul {
		&, li {
			list-style-type: none;
			margin: 0;
			padding: 0;
			position: relative;
		}

		li {
			.panel-trigger {
				border-left: 1px solid #B5B5B5;
				border-right: 1px solid #E0E0E0;
				color: #111;
				cursor: pointer;
				float: left;
				font: bold 11px/24px Tahoma, Geneva, sans-serif;
				padding: 0 6px;
				text-decoration: none;

				&:hover {
					background: #FFF;
				}

				.unread {
					background: url(../images/unread-messages.png);
					color: #FFF;
					font: bold 10px/16px Arial, Helvetica, sans-serif;
					height: 16px;
					position: absolute;
					right: -4px;
					text-align: center;
					top: -6px;
					width: 16px;
					z-index: 30;
				}
			}

			&.selected .panel-trigger {
				background: #FFF;
				border: solid #262626;
				border-width: 0 1px 1px;
				height: 25px;
				line-height: 27px;
				margin: -2px 0 -1px;
				position: relative;
				z-index: 30;

				.unread {
					right: -5px;
					top: -4px;
				}
			}

			&.typing .panel-trigger {
				padding-left: 24px;
			}
		}
	}

	.chat-tabs li {
		float: right;
	}

	/* ---------- Bottom Dock Popups ---------- */

	.chat-panel {
		bottom: 24px;
		display: none;
		position: absolute;
		right: 0;
		z-index: 20;
	}

	.selected .chat-panel {
		display: block;
	}
}

/* ---------- Typing status ---------- */

.typing-status {
	background: url(../images/typing.png) no-repeat 0 0;
	display: none;
	float: left;
	height: 16px;
	left: 4px;
	position: absolute;
	top: 5px;
	width: 16px;
}

.selected .typing-status {
	top: 6px;
}

.typing .typing-status {
	display: block;
}

/* ---------- Online Users ---------- */

.buddy-list {
	.search-buddies .aui-field-content {
		padding: 2px;
	}

	.search-buddies-field {
		background: url(@theme_image_path@/common/search.png) no-repeat 5px 50%;
		padding-left: 25px;
		width: 100%;
	}

	&.loading.selected {
		.chat-panel .panel-window .panel-content {
			@include opacity(0.3);

			li:hover {
				background: none;
				border-color: transparent;
				cursor: default;
			}
		}

		.panel-trigger .trigger-name {
			background: url(@theme_image_path@/application/loading_indicator.gif) no-repeat 0 0;
			padding: 2px 0 2px 20px;
		}
	}

	.panel-content {
		list-style-type: none;
		margin: 0;
		max-height: 400px;
		overflow-x: hidden;
		overflow-y: scroll;
		padding: 2px 0;

		.online-users li {
			border: 1px solid #FFF;
			cursor: pointer;
			float: left;
			height: 24px;
			list-style-type: none;
			margin: 0;
			padding: 2px;
			width: 212px;
		}

		li {
			&.idle {
				height: 14px;
			}

			&:hover {
				background: #F3F3F3;
				border-color: #DDD;
			}
		}

		div {
			font: 12px/24px Arial, Helvetica, sans-serif;
			overflow-x: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		img {
			background: #333;
			display: block;
			float: left;
			height: 24px;
			margin: 0 6px 0 0;
			width: 24px;
		}

		.idle {
			div {
				line-height: 14px;
			}

			img {
				display: none;
			}
		}
	}
}

/* ---------- Popup Window ---------- */

.chat-portlet .chat-settings {
	.settings {
		float: none;
	}

	li {
		border-bottom: 1px solid #999;
		clear: both;
		float: none;
		padding: 10px;
		position: static;
	}
}

.chat-settings {
	label {
		font-weight: bold;
	}

	input {
		vertical-align: middle;
	}

	.ctrl-holder {
		padding: 10px;
	}

	&.saved .panel-trigger .trigger-name {
		background: url(@theme_image_path@/messages/success.png) no-repeat 0 0;
		padding-bottom: 2px;
		padding-left: 20px;
		padding-top: 2px;
	}
}

.chat-status .status-message {
	margin: 5px;
	padding-left: 10px;
}

.panel-window {
	background: #FFF;
	border: 1px solid #262626;
	font: 11px Tahoma, Geneva, sans-serif;
	min-width: 226px;
	position: relative;
}

.panel-icon {
	background: #333;
	border: 1px solid #000;
	display: block;
	height: 48px;
	left: 6px;
	position: absolute;
	top: 4px;
	width: 48px;
}

.panel-title {
	background: #20272B;
	color: #F2F2F2;
	font-weight: bold;
	height: 24px;
	line-height: 24px;
	padding-right: 35px;
	text-indent: 60px;
}

.panel-button {
	cursor: pointer;
	height: 12px;
	width: 12px;

	&.close {
		background: url(../images/chat-close_button.png) left bottom;
		position: absolute;
		right: 4px;
		top: 6px;

		&:hover {
			background-position: left top;
		}
	}

	&.minimize {
		background: url(../images/chat-minimize_button.png) left bottom;
		position: absolute;
		right: 20px;
		top: 6px;

		&:hover {
			background-position: left top;
		}
	}
}

.buddy-list, .chat-settings {
	.panel-title {
		text-indent: 6px;
	}

	.panel-button.minimize {
		right: 4px;
	}
}

.panel-profile {
	background: #EEE;
	border-bottom: 1px solid #CCC;
	height: 27px;
	padding-top: 5px;
	text-indent: 60px;
}

.panel-output {
	border-bottom: 1px solid #000;
	height: 192px;
	overflow-y: scroll;
	padding: 2px;

	.blurb {
		margin: 0;
		position: relative;
	}

	.date, .name {
		line-height: 11px;
		padding: 2px 4px 3px;
	}

	.name {
		background: #828F95;
		color: #FFF;
		display: block;
		padding-right: 4.8em;
	}

	.date {
		color: #EEE;
		font-size: 10px;
		font-style: normal;
		position: absolute;
		right: 0;
		top: 0;
	}

	.incoming {
		.name {
			background: #D3DADD;
			color: #555;
		}

		.date {
			color: #555;
		}
	}

	.text {
		display: block;
		line-height: 14px;
		padding: 4px 8px 8px;
	}
}

.panel-input {
	border-top: 1px solid #369;
	height: 19px;
	position: relative;

	textarea {
		background: none;
		border-width: 0;
		bottom: 0;
		display: block;
		float: left;
		height: 14px;
		overflow: hidden;
		padding: 2px;
		position: absolute;
		width: 222px;
	}
}

.chat-height-monitor, .panel-input textarea {
	font: 11px/14px Tahoma, Geneva, sans-serif;
}

.panel-input textarea.focus {
	&, .ie6 & {
		background: #FFF;
		border-width: 0;
	}
}

.chat-height-monitor {
	@include force-wrap();

	left: -10000em;
	padding: 0;
	position: absolute;
	top: -10000em;
}

.show-notifications-setting {
	display: none;
}

.desktop-notifications .show-notifications-setting {
	display: block;
}

/* ---------- Buddy service extensions ---------- */

.chat-bar {
	.online-users .buddy-services {
		display: none;
		float: right;
		margin-top: 4px;
	}

	.panel-content {
		li:hover .buddy-services {
			display: block;
		}

		.name {
			float: left;
			max-width: 150px;
		}
	}

	.buddy-services div {
		background: transparent no-repeat;
		float: left;
		height: 16px;
		margin-right: 3px;
		width: 16px;
	}
}

/* ---------- Message waiting indicator (only background-color is used) ---------- */

.message-waiting {
	background-color: #A5D6EF;
}

/* ---------- IE/IE6/IE7 ---------- */

.ie {
	.buddy-list .panel-content .online-users li {
		width: 202px;
	}

	.panel-output {
		position: relative;
	}

	.chat-height-monitor {
		word-wrap: break-word;
		zoom: 1;
	}
}

.ie6, .ie7 {
	.buddy-list .search-buddies-field {
		width: 88%;
	}

	.panel-window {
		min-width: auto;
		width: 226px;
	}
}

.ie6 {
	.chat-bar {
		position: absolute;
	}

	.lfr-shim {
		border-width: 0;
		bottom: 0;
		position: absolute;
		z-index: 100;
	}
}

/* ---------- Extras ---------- */

.chat-bar div ul li.selected .panel-trigger {
	@include border-radius(0 4px);
}

.panel-window {
	@include border-radius(4px 4px 0 4px);
}